<template>
  <div class="wrap">
    <div class="fom selfom">
      <h2>查询试题</h2>
      <el-form :inline="true">
        <el-form-item label="题型">
          <el-select placeholder="选择题型" v-model="obj.type">
            <el-option
              v-for="(item, index) in types"
              :key="index"
              :label="item"
              :value="index"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="题干">
          <el-input v-model="obj.questionTitle" />
        </el-form-item>
        <el-form-item label="题目难度">
          <el-select placeholder="选择难度" v-model="obj.level">
            <el-option
              v-for="(item, index) in levels"
              :key="index"
              :label="item"
              :value="index"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-button type="primary" @click="selfun">查询</el-button>
        <div>
          <h3>标题组</h3>
          <el-checkbox-group v-model="obj.tags">
            <el-checkbox
              :label="item.tagId"
              v-for="item in tags"
              :key="item.tagId"
            >
              {{ item.tagName }}
            </el-checkbox>
          </el-checkbox-group>
        </div>
      </el-form>
      <div class="selall clearbox">
        <div
          class="seltk clearbox"
          v-for="item in datas.content"
          :key="item.id"
        >
          <h4 @click="tpupdate(item.id)">
            题目：<a href="#">{{ item.question.title }}</a>
          </h4>
          <p>
            答案：<span>{{ item.answer }}</span>
          </p>
          <div>
            标题组：<span v-for="(values, index) in item.tags" :key="index">
              {{ values }}
            </span>
          </div>
          <p>
            <span>题型：{{ types[item.type] }}</span>
            <span>难度：{{ levels[item.level] }}</span>
          </p>
          <el-button type="success" class="delbtn" @click="delfun(item.id)">
            删除
          </el-button>
        </div>
        <el-pagination
          background
          layout="prev, pager, next"
          :total="datas.totalElements"
          :page-size="datas.size"
          :page-count="datas.totalPages"
          @current-change="currfun"
        ></el-pagination>
        <el-dialog v-model="showdialog" title="提示" width="400px">
          <span>你确定要删除吗</span>
          <template #footer>
            <span class="dialog-footer">
              <el-button type="primary" @click="deldata">确定</el-button>
              <el-button @click="showdialog = false">取消</el-button>
            </span>
          </template>
        </el-dialog>
      </div>
    </div>
  </div>
</template>

<script>
import { ElMessageBox } from "element-plus";
export default {
  name: "Selecttk",
  data() {
    return {
      tags: [],
      types: [
        "请选择",
        "单选题",
        "多选题",
        "填空题",
        "判断题",
        "简答题",
        "输出题",
        "编程题",
      ],
      levels: ["请选择", "简单", "容易", "中", "难", "非常难"],
      obj: {
        type: "",
        questionTitle: "",
        level: "",
        tags: [],
      },
      datas: [],
      showdialog: false,
      delid: "",
    };
  },
  methods: {
    selfun: function () {
      if (
        this.obj.type == "" ||
        this.obj.type == 0 ||
        this.obj.tags.length == 0
      ) {
        ElMessageBox.alert("题型和标题组必须选择", "提示", {
          confirmButtonText: "OK",
        });
      } else {
        this.showdata(0);
      }
    },
    showdata: function (num) {
      var str = "";
      for (let v of Object.keys(this.obj)) {
        str += "&" + v + "=" + this.obj[v];
      }
      str = str.substring(1) + "&index=" + num + "&size=5";
      var th = this;
      this.$axios
        .request({
          method: "get",
          url: "https://114.55.145.59:8443/library/quiz/?" + str,
        })
        .then((result) => {
          console.log(result);
          th.datas = result.data;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    currfun: function (num) {
      this.showdata(num - 1);
    },
    delfun: function (ids) {
      this.showdialog = true;
      this.delid = ids;
    },
    deldata: function () {
      this.showdialog = false;
      var th = this;
      this.$axios
        .request({
          method: "delete",
          url: "https://114.55.145.59:8443/library/quiz/" + this.delid,
        })
        .then((result) => {
          console.log(result);
          th.showdata(0);
        })
        .catch((err) => {
          console.log(err);
        });
    },
    tpupdate: function (ids) {
      this.$router.push({ path: "/updatetk", query: { id: ids } });
      //this.$router.push({path:"/updatetk",})
    },
  },
  created: function () {
    var th = this;
    this.$axios
      .get("https://114.55.145.59:8443/librarytag/tag")
      .then((result) => {
        var x = [];
        for (let i = 0; i < result.data.length; i++) {
          if (result.data[i].tagName != null) {
            x.push(result.data[i]);
          }
        }
        th.tags = x;
      })
      .catch((err) => {
        console.log(err);
      });
  },
};
</script>

<style>
.seltk .delbtn {
  float: right;
}
.selfom .el-form .el-form-item {
  margin: 0 5px;
}
.seltk {
  padding: 20px;
  border-bottom: 1px solid #ccc;
  margin: 10px 0;
}
.seltk h4 a {
  color: #337ab7;
  font-size: 16px;
}
.seltk h4 a:hover {
  text-decoration: underline;
}
.seltk > div,
.seltk > p {
  margin: 15px 0;
}
.seltk > div span {
  margin: 0 15px;
  border: 1px solid #ccc;
  display: inline-block;
  padding: 5px 10px;
  border-radius: 15px;
}
.seltk p span:nth-child(2) {
  margin: 0 15px;
}
.el-pagination {
  float: right;
}
.selall {
  border-top: 1px solid #ccc;
}
</style>
